import { useEffect, useState } from "react";
import { Tabbar } from "react-vant";
import { HomeO, LabelO, Description, Records } from "@react-vant/icons";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
// import instance from "./utils/https";
import "@/css/layout.less";
// import { getFingerprint } from "../utils/fingerprint";
export default function Layout() {
  // const [visitorId, setVisitorId] = useState(null); // 访客 ID
  const navigate = useNavigate();
  const location = useLocation();
  const url = location.pathname;

  const [name, setName] = useState(url);
  const goto = (v: string) => {
    navigate(v);
    setName(v);
  };
  // useEffect(() => {
  //   console.log(visitorId);
    
  //   let res = instance.put("/homePage/addVisit");
  //   console.log(res);
  //   const fetchFingerprint = async () => {
  //     const id: any = await getFingerprint();
  //     setVisitorId(id);
  //     // 发送指纹到服务器
  //     const res: any = await instance.post("/homePage/addtourist", {
  //       deviceid: id,
  //     });
  //     if (res.code == 200) {
  //       localStorage.setItem("_id", res.useruser._id);
  //       localStorage.setItem("isApply",res.useruser.isApply);
  //       console.log("设备指纹上传成功");
  //     } else {
  //       console.log("已上传设备指纹");
  //       localStorage.setItem("_id",res.useruser._id);
  //       localStorage.setItem("isApply", res.useruser.isApply);
  //     }
  //   };

  //   fetchFingerprint();
  // }, []);
  useEffect(() => {
    goto(url);
  }, [url]);

  return (
    <div className="layout">
      <Outlet />
      <div className="demo-tabbar">
        <Tabbar
          style={{ zIndex: 9999 }}
          value={name}
          onChange={(v: any) => goto(v as string)}
          activeColor={"#C6A378"}
          inactiveColor={"#BBB8B5"}
        >
          <Tabbar.Item name="/app/layout/home" icon={<HomeO />}>
            首页
          </Tabbar.Item>
          <Tabbar.Item name="/app/layout/explain" icon={<Description />}>
            说明
          </Tabbar.Item>
          <Tabbar.Item name="/app/layout/sign_up" icon={<Records />}>
            报名
          </Tabbar.Item>
          <Tabbar.Item name="/app/layout/ranking" icon={<LabelO />}>
            排名
          </Tabbar.Item>
        </Tabbar>
      </div>
    </div>
  );
}
